<template>
  <div class="grid">
    <slot></slot>
  </div>
</template>
<script>
export default{
  name: 'grid',
  props: {
    gutter: {
      type: String,
      default: ''
    }
  },
  created () {
    this.$nextTick(() => {
      if (this.gutter) {
        this.$slots.default.forEach(item => {
          item.elm.style.cssText = `padding-left:${this.gutter};padding-right: ${this.gutter}`
        })
        this.$el.style.cssText = `margin-left: -${this.gutter}; margin-right: -${this.gutter}`
      }
    })
  }
}
</script>
<style lang="scss" scoped></style>
